<template>
  <div id="inventoryPage">
    <HeadNav
      type="inquire"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="inquire" sort="allinventory"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <!-- 本社库存分析 -->
            <div class="model-container">
              <div
                class="model-bg"
                style="position: relative; padding-bottom: 60px"
              >
                <div class="section-title">
                  平台库存总析
                  <span class="desc">上次更新 {{ updateTime }}</span>
                </div>
                <div style="padding: 20px 0; text-align: center">
                  <a-radio-group
                    @change="onChange"
                    v-model="choose"
                    button-style="solid"
                  >
                    <a-radio-button value="0">库存预警查询</a-radio-button>
                    <a-radio-button value="1">分仓数据查询</a-radio-button>
                  </a-radio-group>
                </div>
                <!-- 库存预警 -->
                <div
                  style="padding: 0 15px"
                  class="clearfix"
                  v-if="choose == 0"
                >
                  <div
                    class="invent-tab one"
                    :class="{ active: type == 0 }"
                    @click="typeChange(0)"
                  >
                    <div>
                      <span class="ico"
                        ><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-stock" /></svg
                      ></span>
                      <span class="desc">所有品种</span>
                    </div>
                    <div class="bottom">
                      <span class="num">{{ stock_left_list.all }}</span
                      ><span>个品种</span>
                    </div>
                  </div>
                  <div
                    class="invent-tab two"
                    @click="typeChange('sold_out')"
                    :class="{ active: type == 'sold_out' }"
                  >
                    <div>
                      <span class="ico"
                        ><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-stock" /></svg
                      ></span>
                      <span class="desc">已售罄（0库存）</span>
                    </div>
                    <div class="bottom">
                      <span class="num">{{ stock_left_list.sold_out }}</span
                      ><span>个品种</span>
                    </div>
                  </div>
                  <div
                    class="invent-tab two"
                    @click="typeChange('shortage')"
                    :class="{ active: type == 'shortage' }"
                  >
                    <div>
                      <span class="ico"
                        ><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-stock" /></svg
                      ></span>
                      <span class="desc">库存紧张（4周以内）</span>
                    </div>
                    <div class="bottom">
                      <span class="num">{{ stock_left_list.shortage }}</span
                      ><span>个品种</span>
                    </div>
                  </div>
                  <div
                    class="invent-tab two"
                    @click="typeChange('normal')"
                    :class="{ active: type == 'normal' }"
                  >
                    <div>
                      <span class="ico"
                        ><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-stock" /></svg
                      ></span>
                      <span class="desc">库存正常（1~3个月）</span>
                    </div>
                    <div class="bottom">
                      <span class="num">{{ stock_left_list.normal }}</span
                      ><span>个品种</span>
                    </div>
                  </div>
                  <div
                    class="invent-tab two"
                    @click="typeChange('surplus')"
                    :class="{ active: type == 'surplus' }"
                  >
                    <div>
                      <span class="ico"
                        ><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-stock" /></svg
                      ></span>
                      <span class="desc">库存富余（3个月以上）</span>
                    </div>
                    <div class="bottom">
                      <span class="num">{{ stock_left_list.surplus }}</span
                      ><span>个品种</span>
                    </div>
                  </div>
                  <div
                    class="invent-tab two"
                    @click="typeChange('unsalable')"
                    :class="{ active: type == 'unsalable' }"
                  >
                    <div>
                      <span class="ico"
                        ><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-stock" /></svg
                      ></span>
                      <span class="desc">库存积压（低动销）</span>
                    </div>
                    <div class="bottom">
                      <span class="num">{{ stock_left_list.unsalable }}</span
                      ><span>个品种</span>
                    </div>
                  </div>
                </div>
                <!-- 分仓数据 -->
                <div
                  style="padding: 0 15px"
                  class="clearfix"
                  v-if="choose == 1"
                >
                  <div
                    class="invent-tab one"
                    :class="{ active: warehouseType == 0 }"
                    @click="warehouseChange(0)"
                  >
                    <div>
                      <span class="ico"
                        ><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-stock" /></svg
                      ></span>
                      <span class="desc">所有品种</span>
                    </div>
                    <div class="bottom">
                      <span class="num">{{ warehouse_list.total }}</span
                      ><span>个品种</span>
                    </div>
                  </div>
                  <div
                    class="invent-tab two"
                    @click="warehouseChange('hb')"
                    :class="{ active: warehouseType == 'hb' }"
                  >
                    <div>
                      <span class="ico"
                        ><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-stock" /></svg
                      ></span>
                      <span class="desc">华北仓</span>
                    </div>
                    <div class="bottom">
                      <span class="num">{{ warehouse_list.hb }}</span
                      ><span>个品种</span>
                    </div>
                  </div>
                  <div
                    class="invent-tab two"
                    @click="warehouseChange('hai')"
                    :class="{ active: warehouseType == 'hai' }"
                  >
                    <div>
                      <span class="ico"
                        ><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-stock" /></svg
                      ></span>
                      <span class="desc">海宁仓</span>
                    </div>
                    <div class="bottom">
                      <span class="num">{{ warehouse_list.hai }}</span
                      ><span>个品种</span>
                    </div>
                  </div>
                  <div
                    class="invent-tab two"
                    @click="warehouseChange('hz')"
                    :class="{ active: warehouseType == 'hz' }"
                  >
                    <div>
                      <span class="ico"
                        ><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-stock" /></svg
                      ></span>
                      <span class="desc">华中仓</span>
                    </div>
                    <div class="bottom">
                      <span class="num">{{ warehouse_list.hz }}</span
                      ><span>个品种</span>
                    </div>
                  </div>
                  <div
                    class="invent-tab two"
                    @click="warehouseChange('hn')"
                    :class="{ active: warehouseType == 'hn' }"
                  >
                    <div>
                      <span class="ico"
                        ><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-stock" /></svg
                      ></span>
                      <span class="desc">华南仓</span>
                    </div>
                    <div class="bottom">
                      <span class="num">{{ warehouse_list.hn }}</span
                      ><span>个品种</span>
                    </div>
                  </div>
                </div>
                <!-- 搜索条件 -->
                <div style="padding: 20px 15px" class="clearfix">
                  <div class="float-left clearfix">
                    <div class="float-left">
                      <a-select
                        v-model="saleLevel"
                        style="width: 120px; margin-right: 10px"
                      >
                        <a-select-option
                          :value="item.id"
                          v-for="(item, index) in saleLevelList"
                          :key="index"
                          >{{ item.name }}</a-select-option
                        >
                      </a-select>
                      <a-select
                        v-model="turnoverLevel"
                        style="width: 120px; margin-right: 10px"
                      >
                        <a-select-option
                          :value="item.id"
                          v-for="(item, index) in turnoverLevelList"
                          :key="index"
                          >{{ item.name }}</a-select-option
                        >
                      </a-select>
                      <a-auto-complete
                        option-label-prop="value"
                        style="width: 240px"
                        placeholder="搜索供应商名称"
                        @search="onSearchSupplier"
                        :defaultActiveFirstOption="false"
                        v-model="supplierInput"
                        @blur="supplierBlur"
                        @select="selectedSupplier"
                      >
                        <template slot="dataSource">
                          <a-select-option
                            v-for="(opt, index) in dataSourceSupplier"
                            :key="index"
                            :value="opt.name"
                          >
                            <div class="result">
                              <span>{{ opt.name }}</span>
                            </div>
                          </a-select-option>
                        </template>
                      </a-auto-complete>
                    </div>
                    <div class="float-left" style="width: 200px; margin-left:10px">
                      <a-input placeholder="搜索ISBN" v-model="inputVal" />
                    </div>
                  </div>
                  <div class="float-right">
                    <a-button type="primary" @click="search">搜索</a-button>
                    <a-button @click="download" style="margin-left:5px;">导出数据</a-button>
                  </div>
                </div>
                <!-- 列表 -->
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="280" />
                      <col width="140" />
                      <col width="100" />
                      <col width="95" />
                      <col width="80" />
                      <col width="100" />
                      <col width="85" />
                      <col width="170" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>品种信息</td>
                        <td>供应商</td>
                        <td style="text-align: right">DMS</td>
                        <td style="text-align: right">书龄</td>
                        <td style="text-align: right">库存</td>
                        <td style="text-align: right">预计售罄时间</td>
                        <td style="text-align: right">库存周转率</td>
                        <td style="text-align: right">
                          库存分布（ <span class="point have"></span> 有货
                          <span class="point none"></span> 无货）
                        </td>
                      </tr>
                    </thead>
                    <tbody v-if="goodsList.length > 0">
                      <tr v-for="(item, index) in goodsList" :key="index">
                        <td>
                          <div class="goods-desc">
                            <div
                              v-if="item.cover_pic"
                              style="width: 60px; height: 60px"
                            >
                              <img
                                :src="item.cover_pic"
                                alt
                                style="width: 60px; height: 60px"
                              />
                            </div>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 60px; min-height: 60px"
                            ></span>
                            <div class="goods-info" style="height: 60px">
                              <div
                                class="click-font goods-name"
                                :title="item.goods_name"
                                @click="$toDetail(item.goods_id)"
                              >
                                {{ item.goods_name }}
                              </div>
                              <div style="margin-left: 5px">
                                <span v-if="item.isbn" class="data-tab data-tab-eleven">{{
                                  item.isbn
                                }}</span>
                                <span
                                  class="data-tab data-tab-eight"
                                  v-if="item.suggest_text"
                                  >{{ item.suggest_text }}</span
                                >
                              </div>
                            </div>
                          </div>
                        </td>
                        <td>{{ item.supplier_name }}</td>
                        <td style="text-align: right">
                          <div class="main-font">{{ item.dms }}</div>
                          <div>{{ item.month_sale_num }}</div>
                        </td>
                        <td style="text-align: right">
                          <div class="main-font">{{ item.sale_age_text }}</div>
                          <div>{{ item.publish_date }}</div>
                        </td>
                        <td style="text-align: right">
                          <div class="main-font">
                            {{ item.stock ? item.stock + "册" : "--" }}
                          </div>
                          <div>
                            {{
                              item.stock_ma_percent
                                ? item.stock_ma_percent
                                : "--"
                            }}
                          </div>
                        </td>
                        <td style="text-align: right">
                          <div class="main-font">
                            {{ item.sold_out_time_text }}
                          </div>
                          <div>
                            {{
                              (item.stock_left_source && item.stock_left_source !== '--') ? item.stock_left_source + "天" : "--"
                            }}
                          </div>
                        </td>
                        <td style="text-align: right">
                          <div class="main-font">
                            {{
                              item.turnover_source
                                ? item.turnover_source + "%"
                                : "--"
                            }}
                          </div>
                          <div>{{ item.turnover }}</div>
                        </td>
                        <td style="text-align: right">
                          <div>
                            <span
                              >华中<span
                                style="margin-left: 5px; margin-right: 10px"
                                :class="
                                  item.stock_left.hz
                                    ? 'point have'
                                    : 'point none'
                                "
                              ></span
                            ></span>
                            <span
                              >华北<span
                                style="margin-left: 5px"
                                :class="
                                  item.stock_left.hb
                                    ? 'point have'
                                    : 'point none'
                                "
                              ></span
                            ></span>
                          </div>
                          <div>
                            <span
                              >海宁<span
                                style="margin-left: 5px; margin-right: 10px"
                                :class="
                                  item.stock_left.hai
                                    ? 'point have'
                                    : 'point none'
                                "
                              ></span
                            ></span>
                            <span
                              >华南<span
                                style="margin-left: 5px"
                                :class="
                                  item.stock_left.hn
                                    ? 'point have'
                                    : 'point none'
                                "
                              ></span
                            ></span>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="8" style="text-align: center">
                          <div style="padding: 100px 0"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div style="position: absolute; right: 15px; bottom: 15px">
                  <a-pagination
                    :show-total="(total) => `共 ${trueTotal>2000?2000+'+':trueTotal} 条数据`"
                    :default-current="1"
                    :total="total"
                    v-model="page"
                    :defaultPageSize="pageSize"
                    @change="onShowSizeChange"
                  />
                </div>
              </div>
            </div>
            <!-- 库存结构分析 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">库存结构分析</div>
                <div class="kucun" style="padding: 15px">
                  <a-row>
                    <a-col :span="8">
                      <div style="margin-left: 20px">各分仓品种数</div>
                      <div
                        style="width: 300px; margin-top: 20px"
                        id="ring1"
                      ></div>
                    </a-col>
                    <a-col :span="8">
                      <div style="margin-left: 20px">不同销售层级品种数</div>
                      <div
                        style="width: 300px; margin-top: 20px"
                        id="ring2"
                      ></div>
                    </a-col>
                    <a-col :span="8">
                      <div style="margin-left: 20px">不同书龄品种数</div>
                      <div
                        style="width: 300px; margin-top: 20px"
                        id="ring3"
                      ></div>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="8">
                      <div style="margin-left: 20px">各分仓总码洋</div>
                      <div
                        style="width: 300px; margin-top: 20px"
                        id="ring4"
                      ></div>
                    </a-col>
                    <a-col :span="8">
                      <div style="margin-left: 20px">不同销售层级品种码洋</div>
                      <div
                        style="width: 300px; margin-top: 20px"
                        id="ring5"
                      ></div>
                    </a-col>
                    <a-col :span="8">
                      <div style="margin-left: 20px">不同书龄品种码洋</div>
                      <div
                        style="width: 300px; margin-top: 20px"
                        id="ring6"
                      ></div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/inquire/index.scss"></style>
<script>
import {
  QUERY_STOCK_INFO,
  QUERY_STOCK_GOODSLISTS,
  QUERY_STOCK_EXPORT,
} from "../../apis/inquire.js";
import { SUPPLIER_GETS } from "../../apis/common.js";
import { Chart, registerShape } from "@antv/g2";
export default {
  data() {
    return {
      pagePower: true,
      choose: "0",
      type: 0,
      warehouseType: 0,
      updateTime: "",
      isLoading: true,
      goodsTotal: 0,
      stock_left_list: {
        // 库存预警
        all: 0, // 所有品种
        sold_out: 0, // 已缺货
        shortage: 0, // 库存紧张
        normal: 0, // 库存正常
        surplus: 0, // 库存富余
        unsalable: 0, // 滞销
      },
      warehouse_list: {
        // 分仓数据
        total: 0, // 所有
        hb: 0, // 华北
        hai: 0, // 海宁
        hz: 0, // 华中
        hn: 0, // 华南
        sd: 0, // 其他
      },
      supplierID: 0,
      lastSupplier: "",
      supplierInput: "",
      dataSourceSupplier: [],
      categoryList: [],
      chooseCategory: [0],
      inputVal: "",
      goodsList: [],
      trueTotal: 0,
      total: 0,
      page: 1,
      pageSize: 10,
      ringData1: [],
      ringChange1: null,
      ringData2: [],
      ringChange2: null,
      ringData3: [],
      ringChange3: null,
      ringData4: [],
      ringChange4: null,
      ringData5: [],
      ringChange5: null,
      ringData6: [],
      ringChange6: null,
      saleLevel: 0,
      turnoverLevel: 0,
      saleLevelList: [
        { name: "所有月销层级", id: 0 },
        { name: "1000册以上", id: 1 },
        { name: "500~1000册", id: 2 },
        { name: "100~500册", id: 3 },
        { name: "10~100册", id: 4 },
        { name: "10册以下", id: 5 },
      ],
      turnoverLevelList: [
        { name: "所有周转率", id: 0 },
        { name: "周转率极高", id: 1 },
        { name: "周转率较高", id: 2 },
        { name: "周转率一般", id: 3 },
        { name: "周转率较低", id: 4 },
        { name: "周转率极低", id: 5 },
      ],
    };
  },
  mounted() {
    if (this.$route.query.inventoryType == "shortage") {
      this.type = "shortage";
    }
    this.getInfo();
    this.getData();
  },
  methods: {
    // 获取基础信息
    async getInfo() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.supplierID,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await QUERY_STOCK_INFO(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.goodsTotal = res.data.supplier_goods_total;
        this.stock_left_list = res.data.stock_left_list;
        this.warehouse_list = res.data.warehouse_list;
        this.updateTime = this.$moment().format("YYYY-MM-DD HH") + ":00";
        let _total1 = 0,
          _total2 = 0,
          _total3 = 0,
          _total4 = 0,
          _total5 = 0,
          _total6 = 0;
        this.ringData1 = [];
        this.ringData2 = [];
        this.ringData3 = [];
        this.ringData4 = [];
        this.ringData5 = [];
        this.ringData6 = [];
        // 各分仓品种数
        for (let h in res.data.warehouse_list) {
          if (h !== "total") {
            _total1 += res.data.warehouse_list[h];
          }
        }
        for (let i in res.data.warehouse_list) {
          if (i !== "total") {
            let _obj = {},
              _num = Math.round(
                (Number(res.data.warehouse_list[i]) / _total1) * 100
              );
            _obj.value = _num ? _num : 0;
            if (i == "hb") {
              _obj.name = "华北仓";
            } else if (i == "hai") {
              _obj.name = "海宁仓";
            } else if (i == "hz") {
              _obj.name = "华中仓";
            } else if (i == "hn") {
              _obj.name = "华南仓";
            } else if (i == "sd") {
              _obj.name = "其他";
            }
            this.ringData1.push(_obj);
          }
        }
        // // 销售层级品种数
        for (var i in res.data.goods_sale_level_list) {
          _total2 += res.data.goods_sale_level_list[i];
        }
        for (let i in res.data.goods_sale_level_list) {
          let _obj = {},
            _num = Math.round(
              (Number(res.data.goods_sale_level_list[i]) / _total2) * 100
            );
          _obj.value = _num ? _num : 0;
          if (i == "level_1") {
            _obj.name = "1000册以上";
          } else if (i == "level_2") {
            _obj.name = "500~1000册";
          } else if (i == "level_3") {
            _obj.name = "100~500册";
          } else if (i == "level_4") {
            _obj.name = "10~100册";
          } else if (i == "level_5") {
            _obj.name = "10册以下";
          }
          this.ringData2.push(_obj);
        }
        // // 书龄品种数
        for (var i in res.data.goods_sale_age_list) {
          _total3 += res.data.goods_sale_age_list[i];
        }
        for (let i in res.data.goods_sale_age_list) {
          let _obj = {},
            _num = Math.round(
              (Number(res.data.goods_sale_age_list[i]) / _total3) * 100
            );
          _obj.value = _num ? _num : 0;
          if (i == "sale_age_1") {
            _obj.name = "1年以内";
          } else if (i == "sale_age_2") {
            _obj.name = "1~2年";
          } else if (i == "sale_age_3") {
            _obj.name = "2~3年";
          } else if (i == "sale_age_4") {
            _obj.name = "3~5年";
          } else if (i == "sale_age_5") {
            _obj.name = "5年以上";
          }
          this.ringData3.push(_obj);
        }
        // // 分仓码洋数
        for (var i in res.data.warehouse_ma_list) {
          _total4 += res.data.warehouse_ma_list[i];
        }
        for (let i in res.data.warehouse_ma_list) {
          let _obj = {},
            _num = Math.round(
              (Number(res.data.warehouse_ma_list[i]) / _total4) * 100
            );
          _obj.value = _num ? _num : 0;
          if (i == "hb") {
            _obj.name = "华北仓";
          } else if (i == "hai") {
            _obj.name = "海宁仓";
          } else if (i == "hz") {
            _obj.name = "华中仓";
          } else if (i == "hn") {
            _obj.name = "华南仓";
          } else if (i == "sd") {
            _obj.name = "其他";
          }
          this.ringData4.push(_obj);
        }
        // // 销售层级码洋
        for (var i in res.data.goods_sale_level_ma_list) {
          _total5 += res.data.goods_sale_level_ma_list[i];
        }
        for (let i in res.data.goods_sale_level_ma_list) {
          let _obj = {},
            _num = Math.round(
              (Number(res.data.goods_sale_level_ma_list[i]) / _total5) * 100
            );
          _obj.value = _num ? _num : 0;
          if (i == "level_1") {
            _obj.name = "1000册以上";
          } else if (i == "level_2") {
            _obj.name = "500~1000册";
          } else if (i == "level_3") {
            _obj.name = "100~500册";
          } else if (i == "level_4") {
            _obj.name = "10~100册";
          } else if (i == "level_5") {
            _obj.name = "10册以下";
          }
          this.ringData5.push(_obj);
        }
        // // 书龄码洋
        for (var i in res.data.goods_sale_age_ma_list) {
          _total6 += res.data.goods_sale_age_ma_list[i];
        }
        for (let i in res.data.goods_sale_age_ma_list) {
          let _obj = {},
            _num = Math.round(
              (Number(res.data.goods_sale_age_ma_list[i]) / _total6) * 100
            );
          _obj.value = _num ? _num : 0;
          if (i == "sale_age_1") {
            _obj.name = "1年以内";
          } else if (i == "sale_age_2") {
            _obj.name = "1~2年";
          } else if (i == "sale_age_3") {
            _obj.name = "2~3年";
          } else if (i == "sale_age_4") {
            _obj.name = "3~5年";
          } else if (i == "sale_age_5") {
            _obj.name = "5年以上";
          }
          this.ringData6.push(_obj);
        }
        this.$nextTick(() => {
          if (this.ringChange1) {
            this.ringChange1.destroy();
            this.initRing1();
          } else {
            this.initRing1();
          }
          if (this.ringChange2) {
            this.ringChange2.destroy();
            this.initRing2();
          } else {
            this.initRing2();
          }
          if (this.ringChange3) {
            this.ringChange3.destroy();
            this.initRing3();
          } else {
            this.initRing3();
          }
          if (this.ringChange4) {
            this.ringChange4.destroy();
            this.initRing4();
          } else {
            this.initRing4();
          }
          if (this.ringChange5) {
            this.ringChange5.destroy();
            this.initRing5();
          } else {
            this.initRing5();
          }
          if (this.ringChange6) {
            this.ringChange6.destroy();
            this.initRing6();
          } else {
            this.initRing6();
          }
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.supplierID,
        sale_level: this.saleLevel,
        turnover_level: this.turnoverLevel,
        isbn: this.inputVal,
        page: this.page,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      if (this.choose == 0) {
        data.stock_left_type = this.type ? this.type : "";
      } else if (this.choose == 1) {
        data.warehouse = this.warehouseType ? this.warehouseType : "";
      }
      data.sign = this.$getSign(data);
      let res = await QUERY_STOCK_GOODSLISTS(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.goodsList = [];
        this.goodsList = res.data.list;
        this.trueTotal = res.data.total_count;
        this.total = res.data.total_count > 2000 ?2000:res.data.total_count;
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 导出数据
    async download() {
      if (this.goodsList.length == 0) {
        this.$refs.head.globalTip(1, "数据为空，无法导出！", 0);
        return;
      }
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.supplierID,
        sale_level: this.saleLevel,
        turnover_level: this.turnoverLevel,
        isbn: this.inputVal,
        timestamp: tStamp,
      };
      if (this.choose == 0) {
        data.stock_left_type = this.type ? this.type : "";
      } else if (this.choose == 1) {
        data.warehouse = this.warehouseType ? this.warehouseType : "";
      }
      data.sign = this.$getSign(data);
      let res = await QUERY_STOCK_EXPORT(data);
      if (res.code == 0) {
        let _this = this;
        this.$confirm({
          title: "数据导出中",
          content: "数据表格文件正在生成中，前往数据导出任务列表下载",
          okText: "前去下载",
          cancelText: "取消",
          okType: "primary",
          onOk() {
            _this.$router.push({ name: "dataupload" });
          },
          onCancel() {},
        });
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 供应商列表获取
    async getSupplierList(val) {
      var tStamp = this.$getTimeStamp();
      let data = {
        page: 1,
        page_size: 100,
        timestamp: tStamp,
        supplier_name: val,
      };
      data.sign = this.$getSign(data);
      let res = await SUPPLIER_GETS(data);
      if (res.code == 0) {
        this.dataSourceSupplier = [];
        res.data.list.map((value, key) => {
          let _obj = value;
          _obj.name = value.supplier_name + "（" + value.supplier_id + "）";
          this.dataSourceSupplier.push(_obj);
        });
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 供应商
    onSearchSupplier(value) {
      let _value = value.toString();
      this.dataSourceSupplier = [];
      this.getSupplierList(_value);
    },
    // 选中供应商
    selectedSupplier(value) {
      this.dataSourceSupplier.map((val, key) => {
        if (val.name == value) {
          this.supplierID = val.supplier_id;
          this.lastSupplier = value;
        }
      });
    },
    supplierBlur(value) {
      if (this.supplierInput != this.lastSupplier) {
        this.supplierInput = "";
        this.supplierID = 0;
        this.dataSourceSupplier = [];
      }
    },
    onChange(e) {
      this.choose = e.target.value;
      this.page = 1;
      this.isLoading = true;
      this.getData();
    },
    typeChange(type) {
      this.type = type;
      this.page = 1;
      this.isLoading = true;
      this.getData();
    },
    warehouseChange(type) {
      this.warehouseType = type;
      this.page = 1;
      this.isLoading = true;
      this.getData();
    },
    // 选择分类
    selectCategory(value, selectedOptions) {},
    // 搜索
    search() {
      this.page = 1;
      this.isLoading = true;
      setTimeout(()=>{
        this.getData();
      },500);
    },
    // 分页
    onShowSizeChange(current, pageSize) {
      this.isLoading = true;
      this.page = current;
      this.getData();
    },
    // 环形图
    initRing1() {
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });

      this.ringChange1 = new Chart({
        container: "ring1",
        autoFit: true,
        height: 160,
      });

      this.ringChange1.data(this.ringData1);
      this.ringChange1.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      this.ringChange1.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl:
          '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}%</li>',
      });
      this.ringChange1.legend({
        position: "right",
      });
      this.ringChange1
        .interval()
        .adjust("stack")
        .position("value")
        .color("name")
        .shape("slice-shape");
      this.ringChange1.interaction("element-active");
      this.ringChange1.render();
    },
    initRing2() {
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });

      this.ringChange2 = new Chart({
        container: "ring2",
        autoFit: true,
        height: 160,
      });

      this.ringChange2.data(this.ringData2);
      this.ringChange2.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      this.ringChange2.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl:
          '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}%</li>',
      });
      this.ringChange2.legend({
        position: "right",
        offsetX: -10,
      });
      this.ringChange2
        .interval()
        .adjust("stack")
        .position("value")
        .color("name", (name) => {
          if (name == this.ringData2[0].name) {
            return "#e2041b";
          } else if (name == this.ringData2[1].name) {
            return "#d9333f";
          } else if (name == this.ringData2[2].name) {
            return "#e9546b";
          } else if (name == this.ringData2[3].name) {
            return "#f09199";
          } else if (name == this.ringData2[4].name) {
            return "#f5b1aa";
          }
        })
        .shape("slice-shape");
      this.ringChange2.interaction("element-active");
      this.ringChange2.render();
    },
    initRing3() {
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });

      this.ringChange3 = new Chart({
        container: "ring3",
        autoFit: true,
        height: 160,
      });

      this.ringChange3.data(this.ringData3);
      this.ringChange3.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      this.ringChange3.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl:
          '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}%</li>',
      });
      this.ringChange3.legend({
        position: "right",
      });
      this.ringChange3
        .interval()
        .adjust("stack")
        .position("value")
        .color("name", (name) => {
          if (name == this.ringData3[0].name) {
            return "#007b43";
          } else if (name == this.ringData3[1].name) {
            return "#47885e";
          } else if (name == this.ringData3[2].name) {
            return "#98d98e";
          } else if (name == this.ringData3[3].name) {
            return "#badcad";
          } else if (name == this.ringData3[4].name) {
            return "#d6e9ca";
          }
        })
        .shape("slice-shape");
      this.ringChange3.interaction("element-active");
      this.ringChange3.render();
    },
    initRing4() {
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });

      this.ringChange4 = new Chart({
        container: "ring4",
        autoFit: true,
        height: 160,
      });

      this.ringChange4.data(this.ringData4);
      this.ringChange4.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      this.ringChange4.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl:
          '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}%</li>',
      });
      this.ringChange4.legend({
        position: "right",
      });
      this.ringChange4
        .interval()
        .adjust("stack")
        .position("value")
        .color("name")
        .shape("slice-shape");
      this.ringChange4.interaction("element-active");
      this.ringChange4.render();
    },
    initRing5() {
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });

      this.ringChange5 = new Chart({
        container: "ring5",
        autoFit: true,
        height: 160,
      });

      this.ringChange5.data(this.ringData5);
      this.ringChange5.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      this.ringChange5.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl:
          '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}%</li>',
      });
      this.ringChange5.legend({
        position: "right",
        offsetX: -10,
      });
      this.ringChange5
        .interval()
        .adjust("stack")
        .position("value")
        .color("name", (name) => {
          if (name == this.ringData5[0].name) {
            return "#e2041b";
          } else if (name == this.ringData5[1].name) {
            return "#d9333f";
          } else if (name == this.ringData5[2].name) {
            return "#e9546b";
          } else if (name == this.ringData5[3].name) {
            return "#f09199";
          } else if (name == this.ringData5[4].name) {
            return "#f5b1aa";
          }
        })
        .shape("slice-shape");
      this.ringChange5.interaction("element-active");
      this.ringChange5.render();
    },
    initRing6() {
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });

      this.ringChange6 = new Chart({
        container: "ring6",
        autoFit: true,
        height: 160,
      });

      this.ringChange6.data(this.ringData6);
      this.ringChange6.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      this.ringChange6.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl:
          '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}%</li>',
      });
      this.ringChange6.legend({
        position: "right",
      });
      this.ringChange6
        .interval()
        .adjust("stack")
        .position("value")
        .color("name", (name) => {
          if (name == this.ringData6[0].name) {
            return "#007b43";
          } else if (name == this.ringData6[1].name) {
            return "#47885e";
          } else if (name == this.ringData6[2].name) {
            return "#98d98e";
          } else if (name == this.ringData6[3].name) {
            return "#badcad";
          } else if (name == this.ringData6[4].name) {
            return "#d6e9ca";
          }
        })
        .shape("slice-shape");
      this.ringChange6.interaction("element-active");
      this.ringChange6.render();
    },
    publisherChange() {},
  },
};
</script>